<template>
  <video-real-comp
    v-if="isVideoList.isVideo"
    :deviceCode="isVideoList.deviceCode"
    :channelCode="isVideoList.channelCode"
    :longitude="isVideoList.longitude"
    :latitude="isVideoList.latitude"
    videoWidth="620px"
    videoHeight="391px"
    showVideo
    :positonLeft="positionLeft"
    :positonTop="positionTop"
    :transform="transform"
    :index="0"
    @closed="handleClose"
  >
  </video-real-comp>
  <!-- </div> -->
  <!-- </el-dialog> -->
</template>

<script>
import videoRealComp from "@/views/pages/video/videoRealComp";
import {
  getEnumInfo,
  getVideoRealtimeUrl,
} from "@/api/modules/eventManagement/eventDialog/videoDialog";
import { $store } from "@/utils/store";
import store from "@/store";

export default {
  name: "videoDialog",
  components: {
    videoRealComp,
  },
  data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        loop: false, // 导致视频一结束就重新开始。
        muted: true, // 默认情况下将会消除任何音频。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        hls: true,
        html5: {
          hls: {
            withCredentials: false,
          },
        },
        sources: [
          {
            type: "application/x-mpegURL",
            src: "",
            streamType: "",
            streamTypeName: "",
            streamSwitchFlag: "",
            protocolType: store.getters.protocolType,
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: " ", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        choosed: false, //被选中的
      },
      url: "",
      protocolTypeOptions: [], ////流协议类型列表
    };
  },
  props: {
    isVideoList: {
      type: Object,
      default: {},
    },
    positionLeft: {
      type: String | Number,
      default: 0,
    },
    positionTop: {
      type: String | Number,
      default: 0,
    },
    transform: {
      type: String,
      default: "",
    },
  },
  mounted() {
    this.getProtocolTypeOptions();
    // this.videoDataFun();
  },
  methods: {
    /**
     * 查询流协议类型列表
     */
    getProtocolTypeOptions() {
      getEnumInfo({
        enumTypeId: 99,
      }).then((resp) => {
        if (resp.resultStat === "SUCCESS") {
          this.protocolTypeOptions = resp.data.list;
        }
      });
    },
    //实时视频url
    videoDataFun(streamType = 1, protocolType = store.getters.protocolType) {
      let _this = this;
      let info = $store.get("$loginInfo");
      let params = {
        deviceCode: _this.isVideoList.deviceCode, //设备编码
        channelCode: _this.isVideoList.channelCode, //通道编码
        protocolType: Number(protocolType), //协议类型
        customerCode: info.tenantId, //客户编码（租户id）
        streamType: streamType, //码流类型 1-主码流；2-子码流
        netType: store.getters.netType,
      };
      getVideoRealtimeUrl(params).then((resp) => {
        if (resp && resp.code == 200) {
          _this.playerOptions.sources[0].src = resp.data.streamUrl;
          _this.playerOptions.sources[0].streamType = resp.data.streamType;
          _this.playerOptions.sources[0].streamTypeName =
            resp.data.streamType === 2 ? "子码流" : "主码流";
          _this.playerOptions.sources[0].streamSwitchFlag =
            resp.data.streamSwitchFlag;
        } else {
          _this.$message.warning(resp.msg);
        }
      });
    },
    /**
     * 主子码流切换
     */
    changeStreamType(sources) {
      if (sources.streamSwitchFlag === "2") {
        return false;
      }
      const streamType = sources.streamType === 2 ? 1 : 2;
      this.videoDataFun(streamType, this.playerOptions.sources[0].protocolType);
    },
    /**
     * 更改流协议类型
     */
    changeProtocol(protocolType) {
      this.videoDataFun(this.playerOptions.sources[0].streamType, protocolType);
    },
    handleClose(done) {
      this.$emit("videoCancelFun", false);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog {
  margin-top: 0 !important;
  // height: 80vh;
  // width: 80vw;
  top: 30%;
  width: 600px;
}
/deep/ .el-dialog__body {
  text-align: center;
}
/deep/ .video-real,
.show {
  border-radius: unset;
}
.video-player {
  width: 100%;
  height: calc(80vh - 114px);
  pointer-events: none;
  border-radius: 15px;
}

.video-player /deep/ video {
  width: 100%;
  height: calc(80vh - 114px);
  border-radius: 15px;
}
.video {
  height: calc(80vh - 114px);
  background: #22222c;
  box-shadow: 0px 10px 12px 2px rgba(213, 210, 233, 0.59);
  border-radius: 15px;
  margin-bottom: 10px;
  position: relative;
}
/deep/ .el-carousel__container {
  height: calc(80vh - 114px);
}
.video-player /deep/ .video-js.vjs-fluid,
.video-player /deep/ .video-js.vjs-16-9,
.video-player /deep/ .video-js.vjs-4-3 {
  height: calc(80vh - 114px);
  padding: 0;
  border-radius: 15px;
}
.video-player /deep/ .vjs-control-bar,
.video-player /deep/ .vjs-big-play-button,
.video-player /deep/ .vsc-controller {
  display: none;
  border-radius: 15px;
}
/deep/ .vjs-modal-dialog {
  border-radius: 15px;
}

.stream-switch {
  display: block;
  width: 80px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  border-radius: 4px;
  background: rgba(255, 106, 108, 0.3);
  color: #fff;
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 16px;
  z-index: 99;
  cursor: pointer;
}
.stream-switch.disabled {
  cursor: not-allowed;
}
.stream-switch:hover:not(.disabled) {
  background: rgba(255, 106, 108, 0.6);
}
.protocol-switch {
  display: block;
  width: 80px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  border-radius: 4px;
  position: absolute;
  top: 20px;
  left: 120px;
  z-index: 99;
  color: #fff;
}
.protocol-switch /deep/ .el-input__inner,
.protocol-switch /deep/.el-input.is-disabled .el-input__inner {
  height: 36px;
  line-height: 36px;
  border: 0;
  background: rgba(255, 106, 108, 0.3);
  color: #fff;
}
.protocol-switch:hover /deep/ .el-input__inner,
.protocol-switch:hover /deep/.el-input.is-disabled .el-input__inner {
  background: rgba(255, 106, 108, 0.6);
}
.protocol-switch.el-select /deep/ .el-input .el-select__caret {
  color: #fff;
  line-height: 36px;
}
.video /deep/ .easy-player-right-menu {
  display: none !important;
}
.video /deep/ .vjs-control.vjs-button.vjs-stretch-control {
  display: none !important;
}

.dialog-class2 {
  /deep/ .el-dialog__header {
    display: none;
  }
  /deep/ .el-dialog__body {
    padding: 0px;
  }
}
</style>
